<template>
	<view class="photoArt_box">
		<view class="photoArt_tit">
			<image mode="heightFix" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7eb8801a-b901-47ec-8254-367768ecf441/39b53df6-a050-4b81-b6b9-dca85ca4cc98.webp"></image>
		</view>
		<!-- 双倍部分 -->
		<view class="double_shell">
			<image :src="imgUrl" mode="aspectFill"></image>
			<image :src="imgUrlTwo" mode="aspectFill"></image>
		</view>
		<!-- 文字 -->
		<view class="text_box">
			<view>你是藏在云层里的月亮</view>
			<view>也是我穷极一生寻找的宝藏</view>
		</view>
		<!-- 单张部分 -->
		<view class="picture_art">
			<image :src="imgUrlThree" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const imgUrl: String = ref('')
	const imgUrlTwo: String = ref('')
	const imgUrlThree: String = ref('')
	const fileList = uni.getStorageSync('fileList')
	imgUrl.value = fileList[4].url
	imgUrlTwo.value = fileList[5].url
	imgUrlThree.value = fileList[6].url
</script>

<style lang="scss" scoped>
.photoArt_box {
	padding: 0 40rpx;
	.photoArt_tit {
		height: 80rpx;
		text-align: center;
		padding-top: 40rpx;
		margin-bottom: 10rpx;
		image {
			height: 100%;
			animation: photoArtTit 2s linear;
			@keyframes photoArtTit {
				0% {
					transform: scale(.5);
				}
				100% {
					transform: scale(1);
				}
			}
		}
	}
	.double_shell {
		display: flex;
		justify-content: space-between;
		height: 300rpx;
		image {
			width: calc((100% - 20rpx) / 2);
			height: 100%;
			&:nth-child(1) {
				animation: imageFadeRight 2s linear;
				@keyframes imageFadeRight {
					0% {
						transform: translateX(calc(100% + 20rpx));
					}
					100% {
						transform: translateX(0);
					}
				}
			}
			&:nth-child(2) {
				animation: imageFadeLeft 2s linear;
				@keyframes imageFadeLeft {
					0% {
						transform: translateX(calc(-100% - 20rpx));
					}
					100% {
						transform: translateX(0);
					}
				}
			}
		}
	}
	.text_box {
		margin-top: 10rpx;
		view {
			color: #d9b375;
			&:nth-child(1) {
				animation: fontAnimate 2s linear;
				@keyframes fontAnimate {
					0% {
						transform: translateX(100rpx);
						opacity: .5;
					}
					100% {
						transform: translateY(0);
						opacity: 1;
					}
				}
			}
			&:nth-child(2) {
				text-align: right;
				animation: fontAnimateT 2s linear;
				@keyframes fontAnimateT {
					0% {
						transform: translateX(-100rpx);
						opacity: .5;
					}
					100% {
						transform: translateY(0);
						opacity: 1;
					}
				}
			}
		}
	}
	
	.picture_art {
		position: relative;
		margin: auto;
		margin-top: 10rpx;
		image {
			width: 100%;
			height: 300rpx;
			z-index: 1;
			animation: imageAnimate 2s linear;
			@keyframes imageAnimate {
				0% {
					transform: translateY(300rpx) scale(.8);
					opacity: .5;
				}
				100% {
					transform: translateY(0) scale(1);
					opacity: 1;
				}
			}
		}
	}
}
</style>